<style lang="scss">

  .el-row {
    margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
    line-height: 36px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .serverName {
    width: 100px;
    text-align: center;
  }

  .el-dialog--center .el-dialog__body {
    text-align: center;
  }
</style>

<template>
  <div class="app">
    <el-row>
      <el-col :span="3">
        <div class="grid-content bg-purple">安全域设置</div>
      </el-col>
<!--      <el-col :span="8">-->

<!--        <el-button type="primary" plain @click="getOrderModel()" :disabled="showobj">+模板</el-button>-->
<!--      </el-col>-->
      <el-col :span="12">
        <el-button type="primary" plain @click="dialogVisible = true" :disabled="showobj">+新增域</el-button>
        <el-select v-model="modelType" @change="getOrderModel(modelType)" placeholder="请选择模板">
          <el-option v-for="(item,index) in quermodel" :key="index" :label="item.model" :value="item.orderId"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row style="border:1px solid #DCDCDC;padding-top:8px;padding-bottom:8px;padding-left:10px;"
            v-for="(list,index) in allList" :key="index" v-show="showList">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span>{{list.domainName}}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" size="medium" plain v-show="list.showRight" :disabled="showobj"
                   @click="saveBtn(index, list.newlet)">+保存
        </el-button>
        <el-button type="primary" size="medium" plain v-show="!list.showRight" :disabled="showobj"
                   @click="editEvent(index)">+编辑
        </el-button>
        <el-button type="danger" size="medium" plain v-show="list.showRight" :disabled="showobj"
                   @click="deleEvent(index)">删除域
        </el-button>
      </el-col>
      <el-col :span="6" :offset="8">
        <div class="grid-content bg-purple">
          <!-- v-if="btnchange2" -->
          <el-select v-model="list.value" placeholder="请选择资源设备" :disabled="showobj || !list.showRight" multiple
                     :multiple-limit="0" @remove-tag="more(allList)" @change="sercerChange(list.value, index)"
                     default-first-option>
            <el-option v-for="item in serverxz(index)" :key="item.instanceId" :label="item.instanceName"
                       :value="item.instanceIp" :disabled="item.disabled"></el-option>
          </el-select>
        </div>
      </el-col>
      <!-- <el-row> -->
      <el-col :span="2" v-for="(unit,indexpro) in list.vms" :offset="1" v-bind:key="indexpro">
        <span class="iconfont icon-xuniji" style="font-size:40px;margin-left:30px"
              @click="deleTu(index,list,indexpro)"></span>
        <div class="serverName">{{unit.cmpId}}</div>
      </el-col>
      <!-- </el-row> -->
    </el-row>
    <!-- 弹出框 -->
    <el-dialog title="请选择想要添加的安全域类型" :visible.sync="dialogVisible" center width="40%" :modal="false" :close-on-click-modal="false">
      <el-select v-model="newsafe" placeholder="安全域类型" center @change="selChange">
        <el-option v-for="item in safeType" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="newList(allList.length)">确 定</el-button>
			</span>
    </el-dialog>
    <!-- 密码机弹出框 -->
    <el-dialog title="密码机" :visible.sync="dialogVisible01" width="50%" :modal="false" :close-on-click-modal="false">
      <el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
        <el-form-item label="密码机标识">
          <el-input v-model="sizeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码机类型">
          <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit">确 定</el-button>
          <el-button @click="dialogVisible01 = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 密码机弹出框 -->
  </div>

</template>
<script>
    import {constants} from 'fs';
    //   import MsgBus from './MsgBus.js'
    //   import safeChange from './safechange'
    export default {
        props: ['allManifold'],
        data() {
            return {
                modelType:'',
                quermodel:[],
                showList: false, // 传输服务域展示
                dialogVisible: false, // 新增安全域类型
                dialogVisible01: false,
                newsafe: '', // 选择安全域类型
                allList: [],  // 安全域数组
                modifyShow: true, // 修改模式
                editor: false, // 编辑
                showobj: false,
                placName: '',
                safeType: [ // 安全域类型列表
                    {
                        value: 0,
                        label: '普通安全域'
                    },
                    {
                        value: 1,
                        label: '密码机'
                    },
                    {
                        value: 2,
                        label: '网络安全域'
                    }
                ],
                domains: [], // 安全域数组
                serverList: [], // 虚机列表
                serverNewList: [
                    {
                        disabled: false,
                        instanceId: "5-8b10-eeccec5d4e53",
                        instanceIp: "密码机0001",
                        instanceName: "密码机1",
                    },
                    {
                        disabled: false,
                        instanceId: "5-8b10-eeccec5d4e51",
                        instanceIp: "密码机0002",
                        instanceName: "密码机2",
                    }
                ],
                unit: 1,
                value: '',
                show: false,
                sizeForm: {
                    name: '',
                    region: ''
                },
                options: {
                    fullscreen: true,
                    lock: true,
                    // spinner:'el-icon-loading',
                    text: '加载中...',
                      fontSize:'28px',
                    background: 'rgba(0, 0, 0, .1)'
                }
            }
        },
        methods: {
            getmodel(){
                this.$http({
                    url: this.$http.adornUrl('/order/queryModel'),
                    method: 'get',
                }).then(({data}) => {
                    this.quermodel=data.model
                }).catch(error => {
                  this.$message.error("请检查网络连接")
                })
            },
            selChange(val) {
                this.valppp = val + 1
            },
            // 删除服务器
            deleTu(index, value, indexpor) {
                if (value.domainType == '0') {

                } else if (value.domainType == '1') {
                    this.dialogVisible01 = true
                }
            },
            // 删除当前安全域
            deleEvent(index) {
                this.$emit("deleteMomain", index)
                this.more(this.allList)
            },
            // 编辑按钮
            editEvent(index) {
                this.allList[index].showRight = true;
                this.$forceUpdate()
            },
            // 保存按钮
            saveBtn(index,) {
                if (this.allList[index].vms.length != 0) {
                    this.allList[index].showRight = false
                    this.$emit("jsonTop", this.allList)
                    this.$forceUpdate()
                } else if (this.allList[index].vms.length == 0) {
                    this.$message({
                        showClose: false,
                        message: '请选择资源组件',
                        type: 'warning'
                    })
                }
            },
            // 新增设备按钮
            sercerChange(value, index) {
                if (this.newsafe == 0) {
                    this.displayEvent(value, index)
                } else if (this.newsafe == 1) {
                    this.displayEvent(value, index)
                }
            },
            displayEvent(value, index) {
                var arr = []
                if (this.allList[index].domainType == '0') {
                    arr = this.serverList
                } else if (this.allList[index].domainType == '1') {
                    arr = this.serverNewList
                }
                let newArr = arr.filter(item => {
                    if (value.indexOf(item.instanceIp) >= 0) {
                        item.disabled = true
                        return item
                    }
                })
                let ipArr = []
                let nameArr = []
                let vmNameArr = []
                let hostIdArr = []
                let hostNameArr = []
                newArr.forEach(item => {
                    ipArr.push(item.instanceIp)
                    nameArr.push(item.instanceId)
                    vmNameArr.push(item.instanceName)
                    hostIdArr.push(item.hostId)
                    hostNameArr.push(item.hostName)
                })
                var b = []
                this.allList[index].vms = [{
                    cmpId: ipArr.toString(),
                    vmId: nameArr.toString(),
                    vmName: vmNameArr.toString(),
                    hostId: hostIdArr.toString(),
                    hostName: hostNameArr.toString()
                }]
                this.allList[index].vms.forEach(r => {
                    if (r.cmpId.split(",").length > 0) {
                        var cmpIds = r.cmpId.split(",")
                        var vmIds = r.vmId.split(',')
                        var vmNames = r.vmName.split(',')
                        var hostIds = r.hostId.split(',')
                        var hostNames = r.hostName.split(',')
                        cmpIds.forEach((j, index) => {
                            let obj = {
                                cmpId: j,
                                vmId: vmIds[index],
                                vmName: vmNames[index],
                                hostId: hostIds[index],
                                hostName: hostNames[index]
                            }
                            b.push(obj)
                        })
                    }
                    this.allList[index].vms = b
                })
                this.allList[index].elementCount = value.length
                if (this.allList[index].vms.length === 1 && !this.allList[index].vms[0].cmpId) {
                    this.allList[index].vms = []
                }
            },
            unique(arr) {
                return arr.filter(function (item, index, arr) {
                    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
                    return arr.indexOf(item, 0) === index;
                });
            },
            more(val) { // 删除后可选择

                this.showinstance = [];

                for (var i = 0; i < val.length; i++) {
                    for (var j = 0; j < val[i].vms.length; j++) {
                        this.showinstance.push(val[i].vms[j].vmName)
                    }
                }

                this.unique(this.showinstance)

                for (var k = 0; k < this.serverList.length; k++) {
                    this.serverList[k].disabled = false
                }
                for (var k = 0; k < this.serverNewList.length; k++) {
                    this.serverNewList[k].disabled = false
                }


                for (var d = 0; d < this.showinstance.length; d++) {
                    for (var k = 0; k < this.serverList.length; k++) {
                        if (this.serverList[k].instanceName == this.showinstance[d]) {
                            this.serverList[k].disabled = true
                        }
                    }
                }

                for (var d = 0; d < this.serverNewList.length; d++) {
                    for (var k = 0; k < this.serverNewList.length; k++) {
                        if (this.serverNewList[k].instanceName == this.showinstance[d]) {
                            this.serverNewList[k].disabled = true
                        }
                    }
                }

                // if (list != undefined) {
                //
                //     if (list && list.domainType == '0') {
                //         this.serverList.forEach(g => {
                //             g.disabled = false
                //         })
                //     } else if (list && list.domainType == '1') {
                //
                //         this.serverNewList.forEach(g => {
                //             g.disabled = false
                //         })
                //     }
                //
                //     val.forEach(r => {
                //         r.value.forEach(d => {
                //             if (list.domainType == '0') {
                //                 this.serverList.forEach(g => {
                //                     if (d === g.instanceIp) {
                //                         g.disabled = true
                //                     }
                //                 })
                //
                //
                //             } else if (list.domainType == '1') {
                //                 this.serverNewList.forEach(j => {
                //                     if (d === j.instanceIp) {
                //                         j.disabled = true
                //                     }
                //                 })
                //             }
                //         })
                //     })
                //
                // }


            },
            newList(index) { // 创建安全域数据初始化
                if (!this.valppp) {
                    return
                }
                this.dialogVisible = false
                this.showList = true // 让安全域展示
                let time1 = new Date().getTime()
                let name = 'D' + time1
                let name2 = 'M' + time1
                let list = {} // 添加安全域信息
                let domainsMould = { // 安全域模板
                    accessNetwork: {
                        accessNetworkId: '',
                        accessNetworkType: ''
                    },
                    cipherMachine: {
                        cipherMachineId: '',
                        cipherMachineType: ''
                    },
                    domainId: '',
                    showRight: true, // 安全域
                    domainType: '0',
                    elementCount: '0',
                    state: '',
                    stateMessage: '',
                    vms: [
                        {
                            cmpId: "acc",
                            vmId: 0,
                            vmName: '',
                            hostId: '',
                            hostName: ''
                        }
                    ]
                }
                if (this.newsafe == 0) {
                    domainsMould.domainName = name // 安全域名称
                    domainsMould.domainId = time1  // 安全域ID
                    domainsMould.domainType = this.newsafe // 安全域类型
                    domainsMould.elementCount = index + 1 // 安全域个数
                } else if (this.newsafe == 1) {
                    domainsMould.domainName = name2 // 安全域名称
                    domainsMould.domainId = time1  // 安全域ID
                    domainsMould.domainType = this.newsafe // 安全域类型
                    domainsMould.elementCount = index + 1 // 安全域个数
                }
                domainsMould.vms = []
                this.addDomain(domainsMould)
            },
            serverxz(index) { // 创建安全域类型
                if (this.allList[index].domainType == '0') {
                    return this.serverList
                } else if (this.allList[index].domainType == '1') {
                    return this.serverNewList
                }
            },
            addDomain(val) {
                this.allList.push(val)
                this.incrrase(this.allList)
            },
            getOrderModel(orderid) { //获取模板信息
                let loadingInstance1 = this.$loading(this.options)
                this.$http({
                    url: this.$http.adornUrl(`/order/queryOrder/`+orderid),
                    method: 'get'
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        // debugger
                        //修改域的名称
                        let domains = data.order.domains
                        let chains = data.order.chains
                        let time = new Date().getTime()

                        for (let j = 0; j < chains.length; j++) {
                            chains[j].startDomainId = time
                            chains[j].endDomainId = time+1
                        }

                        for (let i = 0; i < domains.length; i++){
                            // let time = new Date().getTime()+i
                            data.order.domains[i].domainId = time+i
                            data.order.domains[i].domainName = "D"+time+i

                        }

                        // //订单置空
                        data.order.orderId = ''
                        data.order.sequenceId = ''
                        data.order.serviceId = ''
                        data.order.updatetime = ''
                        loadingInstance1.close()
                        let listOrder = {
                            details: "moban",
                            domains: data.order
                        }
                        this.allManifold = listOrder
                        this.port1()
                        this.$emit("modelData", listOrder)
                    } else {
                        loadingInstance1.close()
                        this.$message({
                            showClose: false,
                            message: data.msg,
                            type: 'warning'
                        })
                    }
                })
            },
            port1() { // 初始化调用接口
                let securitySet = this.allManifold
                let pro = JSON.stringify(securitySet) == "{}"
                if (!pro) {
                    var loadingInstance2 = this.$loading(this.options)
                }
                this.$http({
                    url: this.$http.adornUrl('/order/getAllResource'),
                    method: 'get',
                }).then(({data}) => {
                    this.serverList = data.instanceList
                    if (!pro) {
                        loadingInstance2.close()
                        this.portdata(securitySet)
                    }
                }).catch(error => {
                    loadingInstance2.close()
                    this.$message({
                        showClose: false,
                        message: '程序异常,请联系管理员',
                        type: 'warning'
                    })
                    this.$emit('hideClose', false)
                })
            },
            portdata(val) { // 数据初始化渲染
                if (val.details === 'xiangqing') {
                    this.showobj = true
                } else if (val.details === 'xiugai') {
                    this.showobj = false
                } else if (val.details === 'moban'){
                    this.showobj = false
                }

                this.showList = true
                this.allList = val.domains.domains
                this.allList.forEach(r => {
                    r.vms.forEach(n => {
                        r.value = []
                        r.showRight = true
                        r.value.push(n.cmpId)
                        this.serverList.forEach(item => {
                            if (n.vmId == item.instanceId) {
                                item.disabled = true
                            }
                        })
                    })
                })
                let allQue = this.allList
                this.incrrase(allQue)
            },
            incrrase(val) {
                this.$emit("list", val)
            },
            onSubmit() {
                console.log('2222222222')
            }
        },
        mounted() {
            this.port1()
            this.getmodel()
        },
        computed: {},
        watch: {
            allList(val, old) {
                if (val && val.length > 1) {
                    this.show = true
                    this.$emit("showflag", this.show)
                } else {
                    this.show = false
                    this.$emit("showflag", this.show)
                }
            }
        }
    }
</script>
